<template>
  <div class="order_all">
    <header>
      <h3>订单管理</h3>
      <el-date-picker
          v-model="time"
          type="month"
          placeholder="选择订单时间"
          value-format="timestamp"
          :clearable="false"
          :editable="false"
          v-if="tool"
      >
      </el-date-picker>
    </header>
    <el-row  style="margin: 0;flex-wrap: wrap" type="flex" align="middle" justify="space-between" v-if="tool">
      <el-col :xs="24" :sm="10" :md="8" :lg="6">
        <el-input
            placeholder="搜索"
            prefix-icon="el-icon-search"
            clearable
            @input="searchGo"
            v-model="search">
        </el-input>
      </el-col>
      <div class="fill hidden-sm-and-up"></div>
      <div class="s hidden-xs-only" v-if="!search">
        <span style="margin-right: 20px">月订单数：{{ userOrderAll.length }}</span><span>月订单额：{{ getOrderMoney(userOrderAll) }}</span>
      </div>
      <el-col :xs="24" class="hidden-sm-and-up" style="padding: 20px 0" v-if="!search">
        <span style="margin-right: 20px">月订单数：{{ userOrderAll.length }}</span><span>月订单额：{{ getOrderMoney(userOrderAll) }}</span>
      </el-col>
    </el-row>
    <el-collapse v-model="activeNames" >
      <el-collapse-item :name="k" v-for="(v,k) in userOrderAll">
        <template #title>
          <div class="col_title">
            <span class="ddh">{{ v.ddh }}</span>
            <transition name="kf">
              <span style="min-width: 100px;display: flex;align-items: center" class="hidden-xs-only famous_brand" v-if="headerShow(k)">{{ v.name2 }}</span>
            </transition>
            <transition name="kf">
              <span style="min-width: 105px;display: flex;align-items: center" v-if="headerShow(k)"><i class  ="el-icon-s-goods" style="font-size: 20px;color: #b02222"></i>{{ v.spname }}</span>
            </transition>
            <transition name="kf">
              <span class="hidden-xs-only" v-if="headerShow(k)" style="display: flex;align-items: center"><i class="el-icon-time" style="font-size: 20px;color: #005fec;margin-right: 3px"></i>{{v.cjsj | timestampToTime}}</span>
            </transition>
            <span><el-tag type="warning" size="small" v-if="v.cz==1">续费</el-tag><el-tag size="small" v-else>开通</el-tag></span>
          </div>
        </template>
        <div class="main">
          <div class="user">
            <div class="avatar" :style="{'background-image':`url('${v.avatar}')`}" @click="goUserInfo(v.user_id)"></div>
            <div class="name" @click="goUserInfo(v.user_id)">
              <div><i class="el-icon-s-custom" style="font-size: 18px;color: #424242;margin-right: 3px"></i>{{v.name}}</div>
              <div class="famous_brand">{{v.name2}}</div>
            </div>
            <div style="margin-left: 70px;display: flex;align-items: center"><i class="el-icon-s-goods" style="font-size: 20px;color: #b02222"></i>{{v.spname}}</div>
          </div>
          <div class="info">
            <div class="l">
              <MyProgress :start_time="v.cjsj" :end_time="v.dqsj" v-if="!headerShow(k)"></MyProgress>
            </div>
            <div class="r">
              <el-badge is-dot type="info" :hidden="!v.shoukuan && !v.remarks">
                <el-button type="warning" icon="el-icon-edit" size="small" circle @click="v.other=!v.other"></el-button>
              </el-badge>
            </div>
          </div>
          <el-collapse-transition>
            <div class="other" v-if="v.other">
              <div class="r">
                <div class="other_label">实际收款：</div>
                <el-badge is-dot :type="v.other_shoukuan_state" :hidden="!v.other_shoukuan_state">
                  <el-input v-model="v.shoukuan" placeholder="收款金额" type="number" @focus="focus_shoukuan(v)" @blur="blur_shoukuan(v)"></el-input>
                </el-badge>
              </div>
              <div class="l">
                <div class="other_label">备注：</div>
                <el-badge is-dot :type="v.other_remarks_state" :hidden="!v.other_remarks_state">
                  <el-input
                      type="textarea"
                      :autosize={minRows:1}
                      placeholder="备注信息"
                      @focus="focus_remarks(v)"
                      @blur="blur_remarks(v)"
                      v-model="v.remarks">
                  </el-input>
                </el-badge>
              </div>
            </div>
          </el-collapse-transition>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import {getOrder, getOrderTime, orderRemarks, searchOrder} from "../../utils/api";
import userimg from "@/assets/userAvatar.png"
import MyProgress from "../../components/MyProgress";
import qs from "qs";
let search_e = null
export default {
  name: "userOrderAll",
  components: {MyProgress},
  data () {
    return {
      userOrderAll:[],
      activeNames: [0],
      time:'',
      search:'',
      tool:true
    }
  },
  methods: {
    searchGo(){
      if(search_e!=null){
        clearTimeout(search_e)
      }
      if(!this.search){
        search_e = setTimeout(()=>{
          if(!this.time){
            let _t = new Date()
            this.time = new Date(_t.getFullYear(),_t.getMonth(),1).getTime()
          }else{
            this.getData(this.time,new Date(new Date(this.time).getFullYear(),new Date(this.time).getMonth()+1,1).getTime())
          }
        },1000)
      }else{
        search_e = setTimeout(()=>{
          searchOrder({search:this.search}).then(res=>{
            if(res.status==200){
              let arr = res?.body
              arr.forEach(v=>{
                v.other = false
                v.other_shoukuan_state = null
                v.other_remarks_state = null
                if(!v.avatar){
                  v.avatar = userimg
                  return
                }
                v.avatar = v.avatar.replace(/public/, 'http://cloud.pinggai8.com')
              })
              this.userOrderAll=arr;
            }else{
              this.$message.error(res?.msg);
            }
            search_e=null
          }).catch(err=>{
            console.log(err)
          })
        },1000)
      }
    },
    getData(b,e){
      getOrder({b,e}).then(respose=>{
        if(respose.status==200){
          let arr = respose?.body
          arr.forEach(v=>{
            v.other = false
            v.other_shoukuan_state = null
            v.other_remarks_state = null
            if(!v.avatar){
              v.avatar = userimg
              return
            }
            v.avatar = v.avatar.replace(/public/, 'http://cloud.pinggai8.com')
          })
          this.userOrderAll=arr
        }else{
          this.$message.error(respose?.msg);
        }
      }).catch(error=>{
        this.$message.error(error);
      })
    },
    goUserInfo(uid){
      this.$router.push({path:'/user/userinfo',query:{id:uid}})
    },
    focus_shoukuan(v){
      v.oldshoukuan = v.shoukuan
      v.other_shoukuan_state = null
      this.userOrderAll = [...this.userOrderAll]
    },
    blur_shoukuan(v){
      if(v.oldshoukuan!=v.shoukuan){
        orderRemarks(qs.stringify({sum:v.shoukuan,ddh:v.ddh})).then(res=>{
          if(res.status==200){
            v.other_shoukuan_state = 'success'
          }else{
            v.other_shoukuan_state = 'danger'
            this.$notify.error({
              title: '错误提示',
              message: res.msg
            });
          }
          this.userOrderAll = [...this.userOrderAll]
        }).catch(err=>{
          console.log(err)
        })
      }
    },
    focus_remarks(v){
      v.oldremarks = v.remarks
      v.other_remarks_state = null
      this.userOrderAll = [...this.userOrderAll]
    },
    blur_remarks(v){
      if(v.oldremarks!=v.remarks){
        orderRemarks(qs.stringify({info:v.remarks,ddh:v.ddh})).then(res=>{
          if(res.status==200){
            v.other_remarks_state = 'success'
          }else{
            v.other_remarks_state = 'danger'
            this.$notify.error({
              title: '错误提示',
              message: res.msg
            });
          }
          this.userOrderAll = [...this.userOrderAll]
        }).catch(err=>{
          console.log(err)
        })
      }
    }
  },
  created() {
    let ddh = this.$route.query.ddh
    let time = this.$route.query.time
    if(ddh || time){
      this.tool = false
      if(ddh){
        ddh = ddh.split(',')
        searchOrder({search:JSON.stringify(ddh)}).then(respose=>{
          if(respose.status==200){
            let arr = respose?.body
            arr.forEach(v=>{
              v.other = false
              v.other_shoukuan_state = null
              v.other_remarks_state = null
              if(!v.avatar){
                v.avatar = userimg
                return
              }
              v.avatar = v.avatar.replace(/public/, 'http://cloud.pinggai8.com')
            })
            this.userOrderAll=arr
          }else{
            this.$message.error(respose?.msg);
          }
          search_e=null
        }).catch(err=>{
          console.log(err)
        })
      }else{
        getOrderTime({day:time}).then(respose=>{
          if(respose.status==200){
            let arr = respose?.body
            arr.forEach(v=>{
              v.other = false
              v.other_shoukuan_state = null
              v.other_remarks_state = null
              if(!v.avatar){
                v.avatar = userimg
                return
              }
              v.avatar = v.avatar.replace(/public/, 'http://cloud.pinggai8.com')
            })
            this.userOrderAll=arr
          }else{
            this.$message.error(respose?.msg);
          }
          search_e=null
        }).catch(err=>{
          console.log(err)
        })
      }
    }else{
      let _t = new Date()
      this.time = new Date(_t.getFullYear(),_t.getMonth(),1).getTime()
    }
  },
  watch:{
    time(n){
      this.activeNames = [0]
      this.getData(n,new Date(new Date(n).getFullYear(),new Date(n).getMonth()+1,1).getTime())
    }
  },
  computed:{
    getOrderMoney(){
      return (v)=>{
        let sum = 0
        v.forEach(item=>{
          sum+=((item.shoukuan || item.price)-0)
        })
        return sum
      }
    },
    headerShow(){
      return (k)=>{
        return !this.activeNames.some(v=>v==k)
      }
    }
  },
  filters:{
    timestampToTime(timestamp){
      let date = new Date(parseInt(timestamp));
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      let D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
      let h = (date.getHours()>=10?date.getHours():'0'+date.getHours()) + ':';
      let m = (date.getMinutes()>=10?date.getMinutes():'0'+date.getMinutes()) + ':';
      let s = date.getSeconds()>=10?date.getSeconds():'0'+date.getSeconds();
      return Y+M+D+h+m+s;
    },
  },
}
</script>

<style scoped>
header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
header h3{
  margin: 0;
  white-space: nowrap;
}
.col_title{
  display: flex;
  justify-content: space-between;
  width: 96%;
}
.col_title .ddh{
  min-width: 170px;
  padding-left: 20px;
  background: url("../../assets/ddh.png") 0 center/20px 20px no-repeat;
  line-height: 48px;
}
.main{
}
.main .user{
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.main .user .avatar{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: center center/contain no-repeat;
  margin-right: 20px;
  cursor: pointer;
}
.main .user .name{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 110px;
  cursor: pointer;
}
.main .info{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
.main .info .l{
  width: calc(100% - 100px);
}
.main .info .r{
  margin: 0 10px 10px 0;
}
.famous_brand{
  background: url("../../assets/famousBrand.png") 0 2px/20px 20px no-repeat;
  padding: 0 0 0 20px;
}
.col_title .famous_brand{
  background-position: 0 14px;
}

.kf-leave-active{
  animation: moveImg .3s linear;
}
.kf-enter-active{
  animation: moveImg .3s reverse linear;
}
@keyframes moveImg {
  0%{opacity: 1;}
  100%{opacity: 0;}
}

@media all and (max-width: 850px) and (min-width: 767px) {
  .col_title .famous_brand{
    display: none!important;
  }
}

.other{
  width: 100%;
  padding-top: 10px;
  min-height: 50px;
  display: flex;
  align-items: center;
}
.other .l,.other .r{
  color: black;
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.other .r /deep/ .el-input__inner{
  height: 30px;

}

/deep/input::-webkit-outer-spin-button,
/deep/input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/* 在Firefox浏览器下 */
/deep/input[type="number"]{
  -moz-appearance: textfield;
}

.other_label{
  white-space: nowrap;
}
.other .l /deep/ textarea{
  resize: none;
}
</style>
